@import "variables.less";
@import "mixins.less";
//
// 菜单
// 
.menu {
    position: absolute;
    height: @menu-height;
    width: @menu-width;
    margin-left: @menu-margin-left;
    color: @menu-color;
    background-color: @menu-bg;
    font-size: @font-size-large;
    .box-shadow(@menu-box-shadow);
    overflow: auto;
    .nested {
        position: relative;
        height: auto;
        width: auto;
        box-shadow: 0 0 0;
        overflow: hidden;
    }
    @media (min-width: 0) and (max-width: @screen-lg) {
        width: 60px;
        .nested {
            margin-left: 0;
        }
    }
}

.menu-header {
    height: @menu-header-height;
    border-bottom: @menu-header-border;
    margin-bottom: @menu-header-bottom-margin;
}

.menu-item {
    display: block;
    position: relative;
    padding: @menu-item-padding;
    &:hover,
    &:focus,
    &.active,
    &.active:hover,
    &.active:focus {
        color: @menu-item-hover-color;
        background-color: @menu-item-hover-bg;
        text-decoration: none;
    }
    >img {
        .icon;
        margin: 0 1em;
    }
    .caret {
        position: absolute;
        right: 20px;
        top: 15px;
        border-top: none;
        border-bottom: 4px solid @gray;
    }
    &.expand {
        .caret {
            border-top: 4px solid @gray;
            border-bottom: none;
        }
        +.nested {
            display: block;
        }
    }
    @media screen and (min-width: 0) and (max-width: @screen-md-max) {
        & {
            padding: 8px 0;
        }
    }
}